<template>
	<view class="box-poi-info flex-direction flex solid-top show">
		<view class="flex-sub flex info-body">
			<view class="flex-sub flex  hidden">
				<view class="image-box">
					
				</view>
				<view class="info-box hidden flex-sub ">
					<view class="title text-cut">
						万嘉便利店青口汽车城万嘉便利店青口汽车城万嘉便利店青口汽车城
					</view>
					<view class="desc map">
						万嘉便利店青口汽车城万嘉便利店青口汽车城万嘉便利店青口汽车城
					</view>
					<view class="desc time">
						营业时间：2020-12-12
					</view>
				</view>
			</view>
			<view class="btns-box  flex-direction flex">
				<view class=" status-box ">
					<view class="text on">
						可借
					</view>
					<view class="text">
						不可还
					</view>
				</view>
				<view class="btn dhan">
					<view class="icon ">
						<image class="wh-100" src="@/static/icons/poi-fs.png" mode="aspectFit"></image>
					</view>
					<view class="text">
						55m
					</view>
				</view>
				<view class="btn wtfk">
					<view class="text">
						问题反馈
					</view>
				</view>
				<view class="flex-auto">
					
				</view>
			</view>
		</view>
		<view class="desc-footer ">
			{{ footerDesc || '' }}
		</view>
	</view>
</template>

<script>
	export default {
		name:"box-poi-info",
		data() {
			return {
				footerDesc: '3分钟内免费，3元/0.5小时，36元/24小时，封顶99元',
			};
		}
	}
</script>

<style lang="scss" scoped>
.box-poi-info {
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
	bottom: -280rpx;
	height: 280rpx;
	line-height: 1;
	background-color: #fff;
	transition: all 1s;
	&.show {
		bottom: 0px;
	}
	
	.info-body {
		padding: 20rpx 16rpx 0 30rpx;
		$imgSize: 160rpx;
		.image-box {
			width: $imgSize;
			height: $imgSize;
			background: #FFFFFF;
			border-radius: 20rpx;
			border: 1rpx solid #FEB029;
			margin-right: 16rpx;
			
		}
		
		.info-box {
			width: 100%;
			.title {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #696969;
				line-height: 48rpx;
			}
			
			.desc {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #999999;
				&.map {
					line-height: 32rpx;
					flex: 1;
				}
				&.time{					
					margin-top: 4rpx;
				}
			}
		}
		
		.btns-box {
			margin-left: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.status-box {
				display: flex;
				align-items: center;
				line-height: 48rpx;
				.text {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 22rpx;
					color: #999999;
					&+.text {
						margin-left: 16rpx;
					}
					&.on {
						color: #F27A31;
					}
				}
			}
			.btn {
				display: flex;
				align-items: flex-end;
				justify-content: center;
				padding: 8rpx 16rpx;
				border-radius: 16rpx;
				background: #F3F3F3;
				margin-top: 8rpx;
				
				
				.icon {
					width: 48rpx;
					height: 48rpx;
					transform: rotateX(180deg);
					transform: rotateY(180deg);
				}
				.text {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #333333;
				}
				&.dhan {
					padding: 16rpx;
				}
				&.wtfk {
					width: 160rpx;
					padding: 10rpx 0;
					border-radius: 100px;
					margin-top: 16rpx;
				}
			}
		}
		
	}
	
	
	.desc-footer {
		width: 100%;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #8B8B8B;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
</style>